<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 左侧统计面板 -->
      <el-col :span="6">
        <el-card class="box-card" v-loading="loading">
          <div class="total-stats">
            <div class="stat-item">
              <div class="title">总警力数</div>
              <div class="count">
                <span>{{ policeForceData.totalPolice }}人</span>
                <div class="sub-count">
                  <div>民警: {{ policeForceData.regularPolice }}</div>
                  <div>辅警: {{ policeForceData.auxiliaryPolice }}</div>
                </div>
              </div>
            </div>
            <div class="stat-item">
              <div class="title">在岗警力</div>
              <div class="count">
                <span>{{ policeForceData.onDutyTotal }}人</span>
                <div class="sub-count">
                  <div>在岗民警: {{ policeForceData.onDutyRegular }}</div>
                  <div>在岗辅警: {{ policeForceData.onDutyAuxiliary }}</div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="duty-stats">
            <div class="title">当日勤务监管</div>
            <div class="duty-items">
              <div class="duty-item">
                <div>在线点位</div>
                <div>应到 {{ dutyMonitorData.onlinePoints.scheduled }}人 实到 {{ dutyMonitorData.onlinePoints.actual }}人</div>
              </div>
              <div class="duty-item">
                <div>线下巡逻</div>
                <div>应到 {{ dutyMonitorData.offlinePatrol.scheduled }}人 实到 {{ dutyMonitorData.offlinePatrol.actual }}人</div>
              </div>
            </div>
          </div>

          <div class="month-stats">
            <div class="title">本月勤务统计</div>
            <el-table :data="monthlyStats" border style="width: 100%">
              <el-table-column prop="type" label="类型" width="100"></el-table-column>
              <el-table-column prop="count" label="次数"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧地图区域 -->
      <el-col :span="18">
        <div class="map-container" ref="mapContainer"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { getPoliceForceOverview, getTodayDutyMonitor, getMonthlyDutyStats } from '@/api/monitor/map';

export default {
  name: 'MonitorMap',
  data() {
    return {
      loading: false,
      map: null,
      markers: [],
      // 警力概况数据
      policeForceData: {
        totalPolice: 0,
        regularPolice: 0,
        auxiliaryPolice: 0,
        onDutyTotal: 0,
        onDutyRegular: 0,
        onDutyAuxiliary: 0
      },
      // 当日勤务监管数据
      dutyMonitorData: {
        onlinePoints: {
          scheduled: 0,
          actual: 0
        },
        offlinePatrol: {
          scheduled: 0,
          actual: 0
        }
      },
      // 本月勤务统计数据
      monthlyStats: [],
      // 警员位置数据
      policeData: [
        {
          id: '1',
          name: '张三',
          position: [114.085947, 22.547],  // 深圳市中心
          type: '民警',
          status: '在岗',
          team: '一大队'
        },
        {
          id: '2',
          name: '李四',
          position: [114.114634, 22.550751],  // 福田区
          type: '民警',
          status: '在岗',
          team: '二大队'
        },
        {
          id: '3',
          name: '王五',
          position: [114.226478, 22.545431],  // 罗湖区
          type: '辅警',
          status: '在岗',
          team: '三大队'
        }
      ],
      // 定时器
      timer: null
    };
  },
  mounted() {
    this.initMap();
    this.fetchAllData();
    
    // 设置定时刷新
    this.timer = setInterval(() => {
      this.fetchAllData();
    }, 60000); // 每分钟刷新一次数据
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy();
    }
    
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    // 获取所有数据
    fetchAllData() {
      this.loading = true;
      
      // 获取警力概况数据
      this.fetchPoliceForceData();
      
      // 获取当日勤务监管数据
      this.fetchDutyMonitorData();
      
      // 获取本月勤务统计数据
      this.fetchMonthlyStatsData();
    },
    
    // 获取警力概况数据
    fetchPoliceForceData() {
      getPoliceForceOverview().then(res => {
        if (res.code === 200) {
          this.policeForceData = res.data;
        } else {
          this.$message.error('获取警力概况数据失败');
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    
    // 获取当日勤务监管数据
    fetchDutyMonitorData() {
      getTodayDutyMonitor().then(res => {
        if (res.code === 200) {
          this.dutyMonitorData = res.data;
        } else {
          this.$message.error('获取当日勤务监管数据失败');
        }
      });
    },
    
    // 获取本月勤务统计数据
    fetchMonthlyStatsData() {
      getMonthlyDutyStats().then(res => {
        if (res.code === 200) {
          this.monthlyStats = res.data.map(item => {
            return {
              type: item.type + '(次)',
              count: item.count
            };
          });
        } else {
          this.$message.error('获取本月勤务统计数据失败');
        }
      });
    },
    
    async initMap() {
      try {
        // 加载高德地图
        const AMap = await AMapLoader.load({
          key: '4b98d24146ee2f4b43cc046b7886cb71',
          version: '2.0',
          plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation']
        });

        // 创建地图实例
        this.map = new AMap.Map(this.$refs.mapContainer, {
          zoom: 12,
          center: [114.085947, 22.547],  // 深圳市中心坐标
          viewMode: '3D'
        });

        // 添加地图控件
        this.map.addControl(new AMap.ToolBar());
        this.map.addControl(new AMap.Scale());
        this.map.addControl(new AMap.HawkEye({isOpen: true}));
        this.map.addControl(new AMap.MapType());
        this.map.addControl(new AMap.Geolocation());

        // 添加警员标记
        this.addPoliceMarkers();
      } catch (e) {
        console.error('地图加载失败', e);
      }
    },
    addPoliceMarkers() {
      this.policeData.forEach(police => {
        const marker = new AMap.Marker({
          position: police.position,
          icon: new AMap.Icon({
            size: new AMap.Size(40, 50),
            image: require('@/assets/images/Police.png'),
            imageSize: new AMap.Size(40, 50)
          }),
          offset: new AMap.Pixel(-20, -50)
        });

        // 创建信息窗体
        const infoWindow = new AMap.InfoWindow({
          content: `
            <div class="info-window">
              <h4>${police.name}</h4>
              <p>类型：${police.type}</p>
              <p>状态：${police.status}</p>
              <p>所属队伍：${police.team}</p>
            </div>
          `,
          offset: new AMap.Pixel(0, -30)
        });

        // 绑定点击事件
        marker.on('click', () => {
          infoWindow.open(this.map, marker.getPosition());
        });

        marker.setMap(this.map);
        this.markers.push(marker);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.map-container {
  height: 800px;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.box-card {
  margin-bottom: 20px;
}

.total-stats {
  .stat-item {
    margin-bottom: 20px;
    
    .title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    .count {
      font-size: 24px;
      color: #409EFF;
      
      .sub-count {
        font-size: 14px;
        color: #666;
        margin-top: 5px;
      }
    }
  }
}

.duty-stats {
  margin-top: 20px;
  
  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  
  .duty-items {
    .duty-item {
      margin-bottom: 10px;
      padding: 10px;
      background: #f5f7fa;
      border-radius: 4px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.month-stats {
  margin-top: 20px;
  
  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
  }
}

:deep(.info-window) {
  padding: 10px;
  
  h4 {
    margin: 0 0 10px 0;
  }
  
  p {
    margin: 5px 0;
  }
}
</style> 